/**
 * 申请帐号 
 */
<template>
	<view>
		<cu-custom bgColor="v-bg-main v-font-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">帐号申请</block>
		</cu-custom>
		<view class="flex justify-center align-center" style="width: 100%;height: 240upx;">
			<image src="../../static/image/login.jpg" mode="" style="height: 160upx;width: 420upx;"></image>
		</view>
		<view style="padding-left: 60upx;padding-right: 40upx;">
			<view class="cu-form-group">
				<view class="title" style="font-size: 55upx;">帐号申请</view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker"  style="font-size: 55upx;"> 
						{{picker[index]}}
					</view>
				</picker>
			</view>
		</view>
		<view class="v-padding-lr-xxl">
			<form @submit="formSubmit">
				<view class="cu-form-group" style="border-bottom: 1upx solid #F0F0F0;" v-if="index == 0">
					<input placeholder="月子会所全称或识别码" v-model="addForm.companyName" name="companyName"></input>
				</view>
				<view class="cu-form-group" style="border-bottom: 1upx solid #F0F0F0;">
					<input placeholder="请输入昵称" v-model="addForm.name" name="name"></input>
				</view>
				<view class="cu-form-group" style="border-bottom: 1upx solid #F0F0F0;">
					<input placeholder="请输入手机号" v-model="addForm.mobile" name="mobile"></input>
				</view>
				<view class="cu-form-group" style="border-bottom: 1upx solid #F0F0F0;">
					<input placeholder="请输入验证码" v-model="addForm.verificationCode" name="verificationCode"></input>
					<button class='cu-btn v-bg-main shadow v-font-white' @click="verificationCode" :disabled="flag">{{msg}}</button>
				</view>
				<!-- <view class="cu-form-group" style="border-bottom: 1upx solid #F0F0F0;">
					<input placeholder="请输入密码" password=tue v-model="addForm.pwd" name="pwd"></input>
				</view>
				<view class="cu-form-group" style="border-bottom: 1upx solid #F0F0F0;">
					<input placeholder="请再次输入密码" password=tue v-model="addForm.pwd1" name="pwd1"></input>
				</view> -->
				<view class="cu-form-group" style="border-bottom: 1upx solid #F0F0F0;">
					<input placeholder="推荐码(选填)" v-model="addForm.decoder" name="decoder"></input>
				</view>
				<view class="margin-top-xl">
					<button style="width: 100%;" formType="submit" class="cu-btn v-bg-main lg v-font-white">注册</button>
				</view>
			</form>
			<view class="cu-form-group v-bg-content padding-0">
				<text class="v-font-p v-font-center" style="width: 100%;font-size: 24upx;color: #787878;">注册之后帐号密码会发送到您的手机，请注意查收</text>
			</view>
		</view>
		<view class="v-font-p v-font-center v-font-main" style="position: absolute;bottom: 70upx;width: 100%;font-size: 24upx;">
			技术支持：武汉旗天科技有限公司   4001185618
		</view>
		<v-loading :loadModal="loadModal" msg="提交中..."></v-loading>
	</view>
</template>

<script>
	import vLoading from '@/components/v-loading/v-loading.vue';
	var graceChecker = require("@/js/formValidation/graceChecker.js");
	
	var rule = [
		{name: "name",checkType: "notnull",errorMsg: "昵称不能为空"},
		{name: "mobile",checkType: "notnull",errorMsg: "手机号不能为空"},
		/* {name: "pwd",checkType: "notnull",errorMsg: "密码不能为空"},
		{name: "pwd1",checkType: "notnull",errorMsg: "确认密码不能为空"}, */
		{name: "verificationCode",checkType: "notnull",errorMsg: "验证码不能为空"}
	];
	var wait=60;
	export default {
		components: {
			vLoading
		},
		data() {
			return {
				index: 0,
				picker: ['月子会所', '个人帐号'],
				msg: "获取验证码",
				flag: false,
				loadModal: false,
				addForm: {
					userType:0,
					mobile: '',
					verificationCode: '',
					companyName: '',
					name: '',
					decoder:'',
					pwd:'',
					pwd1:''
				}
			}
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value;
				this.addForm.userType = e.detail.value;
			},
			formSubmit(e){
				const that = this;
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if(!checkRes){
				    uni.showToast({ title: graceChecker.error, icon: "none" });
					return;
				}
				/* if(that.addForm.pwd != that.addForm.pwd1){
					uni.showToast({ title: "两次密码输入不一致，请检查！", icon: "none" });
					return;
				} */
				that.loadModal = true;
				const url = that.$profile.url + "/console/register";
				that.$http.post(url,that.addForm).then(res=>{
					that.loadModal = false;
					if(res.flag){
						uni.showToast({ title: res.msg, icon: "success" });
						setTimeout(function(){
							uni.reLaunch({
								url: '../login/login'
							});
						},1000)
					}else{
						uni.showToast({ title: res.msg, icon: "none" });
					}
				})
			},
			verificationCode() {
				const that = this;
				if(that.addForm.mobile == ''){
					uni.showToast({
						icon: 'none',
						title: '请先填写手机号码后重试'
					});
					return;
				}else{
					var reg = /^1[0-9]{10,10}$/;
					if (!reg.test(that.addForm.mobile)) { 
						uni.showToast({
							icon: 'none',
							title: '手机号码错误，请填写正确的手机号码'
						});
						return; 
					}
				}
				const url = that.$profile.url + "/console/verificationCode";
				that.$http.post(url,{mobile:that.addForm.mobile,type:"registeredUser"}).then(res=>{
					if(res.flag){
						uni.showToast({
							icon: 'success',
							title: res.msg
						});
						that.time();
					}else{
						var time = parseInt(res.msg);
						if(!(time == time)){
							uni.showToast({
								icon: 'none',
								title: res.msg
							});
							return;
						}else{
							wait = time;
							that.time();
						}
					}
				})
			},
			time() {
				const that = this;
				if (wait == 0) {
					that.flag = false;
					that.msg = "获取验证码";
					wait = 60;
				} else {
					that.flag = true;
					that.msg = wait + "秒后重试";
					wait--;
					setTimeout(function() {
							that.time()
						},1000)
				}
			}
		}
	}
</script>

<style>

</style>
